<template>
	<view>
		<view class="header-section">
			<uni-card class="header-card">
				<template v-slot:title style="margin-top: 1%; margin-top:1%;">
					<view class="card-top-title">
						<view class="card-top-left">
							<text>订单信息：{{data.orderNo}}</text>
						</view>
						<view class="card-top-right">
							<uni-indent-tag :status="data.orderStatus" :inverted="true" />
						</view>
					</view>
				</template>
				<view class="card-content">
					<view class="iconfont icon-locationfill content-top">
						<text>{{data.faultLocation}}</text>
					</view>
				</view>
				<view class="card-content">
					<view class="iconfont icon-infofill content-top">
						<text>{{data.faultDescription}}</text>
					</view>
				</view>
				<view class="card-content">
					<view class="iconfont icon-peoplefill content-top">
						<text>{{data.reportedBy}} {{data.reportedPhone}}</text>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 		<uni-card class="content-sign">
			<view class="sign" @click="handleSign">
				<view class="button">
					<view class="iconfont icon-timefill text">
						<text>签到</text>
					</view>
				</view>
			</view>
		</uni-card> -->
		<uni-card class="content-sign">
			<view class="sign" @click="handleDiagnose(data.orderId)">
				<view class="button">
					<view class="text">
						<text>现场诊断</text>
					</view>
				</view>
			</view>
		</uni-card>
		<uni-card class="content-collapse">
			<uni-collapse accordion v-model="elevatorAccordionVal" class="collapse">
				<uni-collapse-item :open="false">
					<template v-slot:title>
						<view class="title">
							电梯资料
						</view>
					</template>
					<view class="content">
						<view class="content-text">
							<view class="label">
								电梯型号
							</view>
							<view class="text">
								{{elevator.model}}
							</view>
						</view>
						<view class="content-text">
							<view class="label">
								使用年限
							</view>
							<view class="text">
								{{calculateUsageDuration(elevator.installDate).years}}年{{calculateUsageDuration(elevator.installDate).months}}月
							</view>
						</view>
						<view class="content-text">
							<view class="label">
								维修记录
							</view>
							<view class="text" v-for="record in elevatorRecords.slice(0,5)" :key="record.order_no">
								{{subString(record.reported_time,10)}} {{record.fault_description}}
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
		<uni-card class="content-collapse">
			<uni-collapse accordion v-model="repairAccordionVal" class="collapse">
				<uni-collapse-item :open="false">
					<template v-slot:title>
						<view class="title">
							维修指导
						</view>
					</template>
					<view class="content">
						<view class="content-text">
							<view class="label text">
								检查方法:
							</view>
							<view>
								1. 检查电梯门的信号输出是否正常。<br />
								2. 检查导轨有无形变。<br />
								3. 检查地坎有无异物。<br />
								4. 电梯门间隙是否符合标准。<br />
								5. 门锁触点是否同步闭合。<br />
							</view>
						</view>
						<view class="content-text">
							<view class="label text">
								故障排除流程:
							</view>
							<view>
								1. 首先检查电梯门感应器的工作情况。<br />
								2. 如果感应器无异常，则进一步检查门轨道是否存在障碍物。<br />
								3. 最后，对电梯门门锁触点进行检测，确保其正常。<br />
							</view>
						</view>
						<view class="content-text">
							<view class="label text">
								所需工具:
							</view>
							<view>
								1. 手电筒<br />
								2. 间隙检测工具<br />
								3. 多用电表<br />
								4. 扳手<br />
							</view>
						</view>
						<view class="content-text">
							<view class="label text">
								维修步骤:
							</view>
							<view>
								1. 关闭电梯电源，确保安全。<br />
								2. 查看门导轨状态。<br />
								3. 查看地坎的任何可能存在的障碍物。<br />
								4. 查看电梯门间隙是否符合标准。<br />
								5. 检查并紧固所有相关螺丝和固定件。<br />
								6. 使用多用电表检测门锁触电是否同步闭合。<br />
								7. 重新启动电梯，观察问题是否解决。<br />
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
		<uni-card class="content-client">
			<template v-slot:title>
				<view class="title">
					联系客户
				</view>
			</template>
			<view class="client-contact">
				<view class="contact" @click="handlePhone(data.reportedPhone)">
					<view class="iconfont icon-phone">
						<text>拨打电话</text>
					</view>
				</view>
				<view class="contact" @click="handleMessage">
					<view class="iconfont icon-message">
						<text>发送消息</text>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	import {
		getOrderNo,
		getHistoryByElevatorName,
		updateOrder
	} from "@/api/repairManage/order.js"
	import {
		getElevatorManagement
	} from "@/api/deviceManagement/elevatorManagement.js"
	export default {
		data() {
			return {
				orderNo: "",
				data: {},
				elevator: {},
				elevatorRecords: [],
				// 电梯资料展开状态
				elevatorAccordionVal: '1',
				// 维修指导展开状态
				repairAccordionVal: '1'
			};
		},
		onLoad(options) {
			console.log("=========上门维修=========");
			this.orderNo = options.order
			console.log(options.order);
		},
		created() {
			this.getOrderData();
		},
		methods: {
			// 获取订单基础信息
			getOrderData() {
				console.log(this.orderNo);
				if (this.orderNo == undefined) {
					this.$modal.msgError("无效订单号")
				}
				getOrderNo(this.orderNo).then(res => {
					this.data = res.data
				}).then(() => {
					this.getElevatorData(this.data.elevatorId)
				})
			},
			// 获取电梯基本信息
			getElevatorData(elevatorId) {
				getElevatorManagement(elevatorId).then(res => {
					this.elevator = res.data
				}).then(() => {
					this.getElevatorMaintainRecord(this.elevator.elevatorName)
				})
			},
			// 查询电梯维修记录
			getElevatorMaintainRecord(elevatorName) {
				getHistoryByElevatorName(elevatorName).then(res => {
					this.elevatorRecords = res.data
				})
			},
			// 截取字符串长度
			subString(str, len) {
				return str.substr(0, len)
			},
			// 计算使用年限
			// 计算使用年限方法
			calculateUsageDuration(startDateStr, endDateStr = '') {
				if (!startDateStr) return {
					years: 0,
					months: 0
				};

				const start = new Date(startDateStr);
				const end = endDateStr ? new Date(endDateStr) : new Date();

				if (start > end) {
					return {
						years: 0,
						months: 0
					};
				}

				// 计算年份差异
				let years = end.getFullYear() - start.getFullYear();

				// 计算月份差异
				let months = end.getMonth() - start.getMonth();

				// 调整天数差异
				if (end.getDate() < start.getDate()) {
					months--;
				}

				// 处理负的月份值
				if (months < 0) {
					years--;
					months += 12;
				}

				return {
					years,
					months
				};
			},
			// 签到
			handleSign() {
				console.log("签到");
				this.$tab.navigateTo("/pages/indent/sign")
			},
			// 现场诊断
			handleDiagnose(orderId) {
				console.log("现场诊断");
				this.$tab.navigateTo("/pages/indent/diagnose?orderId=" + orderId)
			},
			// 拨打电话
			handlePhone(phone) {
				if (!phone) return uni.showToast({
					title: '无效号码',
					icon: 'none'
				});

				// 仅在 App-Plus 时请求权限
				// #ifdef APP-PLUS
				plus.android.requestPermissions(["android.permission.CALL_PHONE"], (resultObj) => {
					const granted = resultObj.granted || [];
					if (granted.length > 0) {
						uni.makePhoneCall({
							phoneNumber: phone
						});
					} else {
						uni.showToast({
							title: "请授权拨号权限",
							icon: "error"
						});
					}
				});
				// #endif

				// 其他平台直接调用
				// #ifndef APP-PLUS
				uni.makePhoneCall({
					phoneNumber: phone
				});
				// #endif
			},
			// 发送消息
			handleMessage() {
				const phone = this.data.phone;
				const body = '您好，我们是电梯维保团队，请及时联系。';

				const platform = uni.getSystemInfoSync().platform;

				// #ifdef APP-PLUS
				try {
					const message = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
					message.to = [phone];
					message.body = body;
					plus.messaging.sendMessage(message, () => {
						uni.showToast({
							title: '短信发送成功'
						});
					}, (error) => {
						uni.showToast({
							title: '短信发送失败',
							icon: 'error'
						});
						console.error(error);
					});
				} catch (e) {
					uni.showToast({
						title: '短信功能不可用',
						icon: 'error'
					});
					console.error(e);
				}
				// #endif

				// #ifdef H5 || MP-WEIXIN
				if (platform === 'ios') {
					window.location.href = `sms:/open?addresses=${phone}&body=${encodeURIComponent(body)}`;
				} else if (platform === 'android') {
					window.location.href = `sms:${phone}?body=${encodeURIComponent(body)}`;
				} else {
					uni.showToast({
						title: '当前环境不支持短信发送',
						icon: 'none'
					});
					console.log('当前环境不支持短信发送');
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.header-section {

		position: relative;
		width: 100%;

		.header-card {
			position: relative;
			word-wrap: break-word;
			// background-color: #FFFFFF;
			margin-top: 0.5%;
			border-radius: 5px;
			// display: inline-flex;

			.card-top-title {
				position: relative;
				width: 100%;
				display: inline-flex;


				.card-top-left {
					position: absolute;
					left: 3%;

					text {
						font-family: system-ui;
						font-size: 15px;
						font-family: 黑体;
						line-height: 21px;
						letter-spacing: 0px;

						font-feature-settings: "kern" on;
						color: #111827;
					}
				}

				.card-top-right {
					position: absolute;
					right: 5%;
				}
			}

			.card-content {
				width: 100%;
				margin-top: 2%;

				.content-top {
					width: 100%;

					text {
						padding-left: 1%;
						font-family: 仿宋体;
						font-size: 12.75px;
						font-weight: normal;
						line-height: 17.5px;
						letter-spacing: 0px;
						font-feature-settings: "kern" on;
						color: #4B5563;
					}
				}
			}

			.card-bottom {
				position: relative;
				width: 100%;
				display: inline-flex;
				margin-top: 2%;
				margin-bottom: 8%;

				.card-bottom-left {
					position: absolute;
					left: 3%;

					.card-bottom-left-tag {
						display: inline-flex;
						padding: 2px;
					}
				}

				.card-bottom-right {
					position: absolute;
					top: -1%;
					right: 5%;
				}
			}
		}
	}

	.content-sign {
		position: relative;
		margin: auto;
		background-color: #ffffff;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
		border-radius: 5px;


		.button {
			position: relative;
			width: 60%;
			margin: auto;
			text-align: center;
			width: 161px;
			height: 42px;
			border-radius: 4px;
			background-color: #3B82F6;
			display: inline-block;

			.text {
				padding-top: 5%;
				font-weight: normal;
				font-kerning: normal;
				font-size: 16px;
				line-height: 21px;
				text-align: center;
				letter-spacing: 0px;
				font-feature-settings: "kern" on;
				color: #FFFFFF;
				display: inline-block;

				text {
					margin-left: 10px;
				}
			}
		}

	}

	.content-collapse {

		background: #DBEAFE;

		.collapse {

			background: #DBEAFE;

			.title {
				font-size: 15px;
				font-family: 仿宋体;
				font-weight: bold;
				color: #000000;
			}

			.content {
				background: #DBEAFE;

				.content-text {
					padding-top: 1%;
					padding-bottom: 1%;

					.label {
						font-family: 仿宋体;
						font-size: 12.25px;
						font-weight: normal;
						line-height: 17.5px;
						letter-spacing: 0px;

						font-feature-settings: "kern" on;
						color: #6B7280;
					}

					.text {
						font-family: 仿宋体;
						font-size: 13px;
						font-weight: bolder;
						line-height: 17.5px;
						letter-spacing: 0px;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-feature-settings: "kern" on;
						color: #000000;
					}
				}

			}
		}

	}

	.content-client {
		position: relative;
		background-color: #ffffff;
		padding-top: 20px;
		padding-bottom: 20px;
		border-radius: 5px;

		.title {
			padding-top: 2%;
			padding-left: 2%;
			font-size: 15px;
			font-family: 仿宋体;
			font-weight: bold;
			font-feature-settings: "kern" on;
			color: #000000;
		}

		.client-contact {
			width: 100%;
			margin: auto;
			display: inline-flex;

			.contact {
				width: 80%;
				background: #3B82F6;
				color: #FFFFFF;
				text-align: center;
				margin: auto;
				border-radius: 5px;
				padding-top: 2.5%;
				padding-bottom: 2.5%;
				margin-left: 5px;
				margin-right: 5px;

				text {
					margin-left: 10px;
					font-family: 仿宋体;
					font-size: 15px;
					font-weight: normal;
					text-align: center;
					letter-spacing: 0px;

					font-feature-settings: "kern" on;

				}
			}


		}
	}
</style>